apps/mail/components/context/thread-context.tsx (1)

239-253: Inconsistent indentation and spacing issues.

The implementation of handleDelete function has inconsistent indentation (tabs instead of spaces) and a formatting issue in the error logging.

Apply this diff to fix the indentation and spacing:

const handleDelete = () => async () => {
-		try {
+    try {
        const promise = deleteThread({ id: threadId }).then(() => {
          setMail(prev => ({ ...prev, bulkSelected: [] }));
          return mutate();
        });
        toast.promise(promise, {
          loading: t('common.actions.deletingMail'),
          success: t('common.actions.deletedMail'),
          error: t('common.actions.failedToDeleteMail'),
        });
    } catch (error) {
-        console.error(`Error deleting ${threadId? 'email' : 'thread'}:`, error);
+        console.error(`Error deleting ${threadId ? 'email' : 'thread'}:`, error);
      }
    };

The function otherwise correctly implements the deletion workflow with appropriate error handling and user notifications.

apps/mail/scripts.ts (2)

40-43: Add exponential backoff for reliable testing.

The current random delay implementation is simple but doesn't handle rate limiting properly. For more robust testing, consider implementing exponential backoff.

-    const randomDelay = Math.floor(Math.random() * 1000);
-    console.log('Sleeping for', randomDelay, 'ms...');
-    await new Promise((resolve) => setTimeout(resolve, randomDelay));
+    // Add exponential backoff with jitter
+    const baseDelay = 500;
+    const attempt = i + 1;
+    const maxDelay = Math.min(baseDelay * Math.pow(2, attempt), 5000);
+    const delay = Math.floor(maxDelay * (0.5 + Math.random() * 0.5));
+    console.log(`Sleeping for ${delay} ms (attempt ${attempt})...`);
+    await new Promise((resolve) => setTimeout(resolve, delay));

---

31-50: Consider adding command-line parameters for better testability.

The test function lacks configurability, making it difficult to use in different environments or for different testing scenarios.

Add command-line parameter support:

import { faker } from '@faker-js/faker';
import { Resend } from 'resend';
import minimist from 'minimist';

const arr = [
  // existing email templates
];

const runTest = async (options: {
  apiKey: string;
  recipient: string;
  count?: number;
  maxDelay?: number;
}) => {
  const resend = new Resend(options.apiKey);
  const emailsToSend = options.count ? arr.slice(0, options.count) : arr;
  
  for (const item of emailsToSend) {
    const response = await resend.emails.send({
      from: `${faker.person.firstName().toLowerCase()}@n8n.new`,
      to: options.recipient,
      subject: item.subject,
      html: item.text,
    });
    
    const randomDelay = Math.floor(Math.random() * (options.maxDelay || 1000));
    console.log('Sleeping for', randomDelay, 'ms...');
    await new Promise((resolve) => setTimeout(resolve, randomDelay));

    if (response.error) {
      console.log('Error sending email:', response.error);
    } else {
      console.log('Email sent successfully');
    }
  }
};

// Parse command line arguments
const argv = minimist(process.argv.slice(2));
const apiKey = argv.key || process.env.RESEND_API_KEY;
const recipient = argv.to || process.env.TEST_RECIPIENT_EMAIL;

if (!apiKey) {
  console.error('No API key provided. Use --key or set RESEND_API_KEY env variable');
  process.exit(1);
}

if (!recipient) {
  console.error('No recipient provided. Use --to or set TEST_RECIPIENT_EMAIL env variable');
  process.exit(1);
}

runTest({ 
  apiKey, 
  recipient,
  count: argv.count ? parseInt(argv.count, 10) : undefined,
  maxDelay: argv.delay ? parseInt(argv.delay, 10) : undefined
});

apps/mail/components/create/email-input.tsx (3)

88-98: Consider enhancing keyboard navigation for better UX.

The keyboard handling is good for Enter and Escape, but consider adding Tab support to allow users to quickly edit multiple email addresses in sequence.

 const handleEditKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
   if (e.key === 'Enter') {
     e.preventDefault();
     onEditEmail(type, index, editValue);
     setEditingIndex(null);
     setEditValue('');
   } else if (e.key === 'Escape') {
     setEditingIndex(null);
     setEditValue('');
+  } else if (e.key === 'Tab' && !e.shiftKey && index < emails.length - 1) {
+    e.preventDefault();
+    onEditEmail(type, index, editValue);
+    handleChipClick(index + 1, emails[index + 1]);
+  } else if (e.key === 'Tab' && e.shiftKey && index > 0) {
+    e.preventDefault();
+    onEditEmail(type, index, editValue);
+    handleChipClick(index - 1, emails[index - 1]);
   }
 };

---

113-133: Add validation and consider accessibility improvements for the edit input.

The conditional rendering of the editable input looks good, but consider adding:

1. Email validation before submitting the edit
2. ARIA attributes for better screen reader support
3. Potentially save changes on blur rather than discarding them

 {editingIndex === index ? (
   <div className="relative flex items-center">
     <input
       ref={editInputRef}
       type="text"
       value={editValue}
       onChange={(e) => setEditValue(e.target.value)}
       onKeyDown={(e) => handleEditKeyDown(e, index)}
-      onBlur={() => setEditingIndex(null)}
+      onBlur={() => {
+        // Optional: validate and save on blur
+        const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(editValue.trim());
+        if (isValid && editValue !== email) {
+          onEditEmail(type, index, editValue);
+        }
+        setEditingIndex(null);
+        setEditValue('');
+      }}
       className="w-[150px] bg-transparent focus:outline-none pr-6"
+      aria-label={`Edit email address ${email}`}
     />
     <span className="absolute right-1 text-xs text-muted-foreground">↵</span>
   </div>
 ) : (
   <span
     onClick={() => handleChipClick(index, email)}
     className="max-w-[150px] cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap"
+    aria-label={`Click to edit: ${email}`}
+    role="button"
+    tabIndex={0}
+    onKeyDown={(e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        handleChipClick(index, email);
+      }
+    }}
   >
     {email}
   </span>
 )}

---

102-102: CSS class concatenation can be simplified with template literals.

The CSS class concatenation is correct but can be simplified for better readability.

- <div className={`text-muted-foreground flex-shrink-0 pr-3 text-[1rem] font-[600] opacity-50 ${className}`}>
+ <div className={`text-muted-foreground flex-shrink-0 pr-3 text-[1rem] font-[600] opacity-50 ${className ?? ''}`}>

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro